<template>
  <div>
    <el-form ref="form" :model="form">
            <!-- <el-form-item>
                <el-button @click="disabled = false" class="btn-edit">编辑</el-button>
                <el-button @click="disabled = true" class="btn-save">保存</el-button>
            </el-form-item> -->
            <el-form-item label="表名称">
                <el-input v-model="table_name" :disabled="disabled" placeholder="请输入接口名称" />
            </el-form-item>
    </el-form>
    <el-label label="dd"></el-label>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
            <el-table-column align="center" v-for="item in columns" :key="item.id" :label="item.label">
                <template slot-scope="{row}">
                    <span>{{ row[item.prop] }}</span>
                </template>
            </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="showPageData(page-1)" />
  </div>
</template>

<script>
import { getTableDetail } from '@/api/metadata';
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
    components: {
        Pagination
    },
    props: {
        id: {
            type: String,
        }
    },
    data() {
        return {
            allData:null,
            list: null,
            total: 0,
            listLoading: true,
            page: 1,
            limit: 20,
            table_name :'',
            columns: [
                {id: 1, prop: 'id', label: 'ID' },
                {id:2, prop: 'column_name', label:'字段'},
                // {id:3, prop: 'table_name', label:'表名称'},
                // {id:4, prop: 'table_schema', label:'数据库'},
                // {id:5, prop: 'schema_type', label:'数据库类型'},
                {id:6, prop: 'column_order', label:'字段位置'},
                {id:7, prop: 'column_comment', label:'字段描述'},
                {id:8, prop: 'data_type', label:'字段类型'},
                {id:9, prop: 'is_primary_key', label:'是否主键'},
                {id:10, prop: 'is_nullable', label:'是否为空'},
                // {id:11, prop: 'src_column_name', label:'来源字段'},
                // {id:12, prop: 'src_table_name', label:'来源表名'},
                // {id:13, prop: 'src_table_schema', label:'来源数据库'},
                // {id:14, prop: 'src_schema_type', label:'来源数据库类型'},
                // {id:15, prop: 'column_value_rules', label:'映射规则'}
            ]
        }
    },
    mounted() {
        this.fetchData()
    },
    methods: {
        async fetchData() {
            this.table_name = this.$route.query.name
            await getTableDetail({ table_name:this.table_name, table_id: this.id}).then(response => {
                this.allData = response.data
                // this.columns = this.list.map(item => { return { id: item.id, prop: item.column_name, label: item.column_comment } })
                this.listLoading = false
                if (Array.isArray(this.allData)) {
                    this.total = this.allData.length
                    console.log(this.total)
                }
                
                // console.log(this.columns)
            })

            this.showPageData(0)
        },
        showPageData(page) {
            this.list = this.allData.slice(this.limit * page, this.limit * (page+1))
        }
    }
}

</script>

<style scoped>

</style>